<template>
  <div class="now-play-icon">
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </div>
</template>

<style lang="less" scoped>
.now-play-icon {
  align-items: flex-end;
  display: flex;
  width: 20px;
  height: 15px;
  i {
    animation: play 0.8s ease 0.3s infinite;
    &:nth-of-type(2) {
      animation-delay: 0.1s;
    }
    &:nth-of-type(3) {
      animation-delay: 0.15s;
    }
    &:nth-of-type(4) {
      animation-delay: 0.25s;
    }
    width: 2px;
    height: 15px;
    background: @red-color;
    margin-right: 3px;
  }
}
@keyframes play {
  0% {
    height: 15px;
  }
  50% {
    height: 5px;
  }
  100% {
    height: 15px;
  }
}
</style>